/**
 * 描述 验证邮箱的方法
 * @date 2020-09-19
 * @returns {boolean}  false 验证没有通过，true验证通过
 */
function validEmail() {
    //找到email元素
    let emailInput = document.querySelector('#email')
    //获得email元素的值，永远是字符串，哪怕输入的是数字
    let value = emailInput.value.trim()
    //找到span元素
    let span = document.querySelector('#email-check')
    //在span中输入空字符，清空操作
    span.innerHTML = ''
    /*
     3、.符号只能出现在@之后 @126. @qq.
     4、域名的后缀["com","com.cn","net","cn","edu.cn"]
    */
    //1、不能为空
    if (!value) {
        span.innerHTML = '邮箱不能为空'
        span.style.color = 'red'
        return false
    }
    //2、判断有一个@
    let index = value.indexOf('@')
    if (index === -1) {
        span.innerHTML = '邮箱必须有@'
        span.style.color = 'red'
        return false
    }
    //3、判断只能有一个@
    let lastIndex = value.lastIndexOf('@')
    if (lastIndex !== index) {
        span.innerHTML = '邮箱只能有一个@'
        span.style.color = 'red'
        return false
    }
    //4、不能在首位
    if (0 === index) {
        span.innerHTML = '邮箱的@不能在首位'
        span.style.color = 'red'
        return false
    }
    //5、找.的下标
    let dotIndex = value.indexOf('.')
    if (dotIndex === -1) {
        span.innerHTML = '邮箱要有.符号'
        span.style.color = 'red'
        return false
    }
    if (dotIndex < index) {
        span.innerHTML = '邮箱@前不能有.符号'
        span.style.color = 'red'
        return false
    }
    //6、域名名称必须是2位以上
    let dnsName = value.substring(index + 1, dotIndex)
    if (dnsName.length < 2) {
        span.innerHTML = '邮箱的域名长度不能<2'
        span.style.color = 'red'
        return false
    }
    //7、判断域名后缀是否是
    let suffixArr = ['com', 'com.cn', 'net', 'cn', 'edu.cn']
    let suffix = value.substring(dotIndex + 1)
    //false 是suffix不在suffixArr中的标记
    let flag = false
    for (let i = 0; i < suffixArr.length; i++) {
        if (suffixArr[i] === suffix) {
            flag = true
            break
        }
    }
    if (!flag) {
        span.innerHTML = '邮箱的域名不合法'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '邮箱正确'
    span.style.color = 'green'
    return true
}

//函数的自调用
function ml() {
    //获得type=email的input框元素
    let emailInput = document.querySelector('#email')
    console.log(emailInput)
    //对type=email的input框元素绑定事件监听:失去焦点
    emailInput.onblur = validEmail
}
ml();

